<template>
    <div>
        <el-table id="tableWrapper" v-loading="loading" ref="tableNode" :data="computedTableData" v-bind="$attrs"
            @selection-change="handleSelectionChange">
            <el-table-column v-for="(c, index) in tableColumns" :key="c.dataIndex" show-overflow-tooltip v-bind="c">
                <template :key="key" v-for="(render, key) of c.slots" #[key]="scope">
                    <ExtentSlot :key="key" :render="render" :data="scope.row"></ExtentSlot>
                </template>
            </el-table-column>
            <slot name="tableOperator"> </slot>
            <template #summary v-if="slots.summary">
                <slot name="summary"></slot>
            </template>
            <template #footer v-if="slots.footer">
                <slot name="footer"></slot>
            </template>
        </el-table>
        <div v-if="isOpenPagination" class="pagination_box">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                v-model:current-page="pagination.pageIndex" :page-sizes="[20, 50, 100]"
                v-model:page-size="pagination.pageSize" :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>
</template>
  
<script setup>
import {
    ref,
    reactive,
    watch,
    useSlots,
    computed,
    onMounted,
    nextTick,
} from "vue";
import { useTable } from "../hooks/useTable.js";


import ExtentSlot from "../../lib/component/ExtentSlot.js";

console.log(ExtentSlot)
const slots = useSlots();
const props = defineProps({
    getTableApi: {
        type: String,
        default: "",
    },
    tableColumns: {
        type: Array,
        default: () => []
    },
    searchFormData: {
        type: Object,
        default: () => {
            return {};
        },
    },
    isOpenPagination: {
        //是否开启分页
        type: Boolean,
        default: true,
    },
    multipleSelection: {
        //多选
        type: Object,
        default: () => [],
    },
    isOpenSelect: {
        // 是否开启表格选择
        type: Boolean,
        default: true,
    },
    selection: {
        type: String,
        default: "checkbox", //checkbox多选。radio单选
    },

    isOpenMountedGetData: { //挂载时请求数据
        type: Boolean,
        default: false,
    },
    tableKey: {
        //用于表格数据选择
        type: String,
        default: "id",
    },
    tableSource: {
        type: Array,
        default: () => [],
    },
    delParamsKeys: { //需要删除的key
        type: Array,
        default: () => [],
    },
    //   请求表格数据方法，post,get。有些表格是post
    requestMethod: {
        type: String,
        default: "post",
    },
});

let tableNode = ref();
const emit = defineEmits(["update:multipleSelection", "getTable"]);


const computedTableData = computed(() => {
    return props.tableSource.length ? props.tableSource : tableData.value;
});






// 计算表格列有没有占满当前内容区

const {
    tableData,
    searchTable,
    getTable,
    delTableData,
    getTableColumns,
    loading,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    updateTableData,
    updateLoading,
} = useTable({
    isOpenMountedGetData: props.isOpenMountedGetData,
    getTableApi: props.getTableApi,
    searchFormData: props.searchFormData,
    delparamsKeys: props.delParamsKeys,
    method: props.requestMethod,
});

// 多选变化
const handleSelectionChange = (val) => {
    if (props.selection == "radio") {
        if (props.multipleSelection.length == 1) {
            tableNode.value.clearSelection();
            tableNode.value.toggleRowSelection(val);
        }
    }
    emit("update:multipleSelection", val);
};

watch(
    () => tableData.value,
    () => {
        emit("getTable", tableData.value);
    },
    {
        deep: true,
    }
);

defineExpose({
    tableNode,
    searchTable,
    getTable,
    delTableData,
});
</script>
<style lang="scss" scoped>
.pagination_box {
    margin-top: 5px;
    padding: 0 30px 10px 0;

    .el-pagination {
        display: flex;
        justify-content: end;
        height: 46px;
    }
}
</style>
  